import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less';
import cls from 'classnames';
import { connect } from 'umi';
import NoData from '../../noData';

const names = [
  '未开始',
  '未开始(延期)',
  '执行中',
  '执行中(延期)',
  '已完成',
  '已完成(提前)',
  '已完成(延期)',
  '未知',
  // '全部',
];

const colors = [
  'rgba(254, 177, 81, 1)',
  'rgba(254, 103, 81, 1)',
  'rgba(61, 251, 255, 1)',
  'rgba(61, 152, 255, 1)',
  'rgba(61, 255, 159, 1)',
  'rgba(158, 255, 61, 1)',
  'rgba(232, 61, 255, 1)',
  'rgba(88, 94, 99, 1)',
  'rgba(32, 57, 73, 1)',
  // 'rgba(71 ,104 ,125, 1)',
];

const echartData = [
  { name: '已完成', data: 0, color: 'rgba(61,251,255, 0.3)' },
  { name: '进行中', data: 0, color: 'rgba(254, 177, 81, 1)' },
  { name: '未完成', data: 11, color: 'rgba(235, 78, 54, 1)' },
  { name: '全部', data: 9, color: '#203949' },
];

const _option = JSON.stringify({
  backgroundColor: 'transparent',
  title: [
    {
      left: 26,
      textStyle: {
        fontSize: 12,
        color: '#fff',
        fontWeight: 300,
      },
    },
    {
      right: 10,
      textStyle: {
        fontSize: 12,
        color: 'rgba(255,255,255,0.65)',
        fontWeight: 300,
      },
    },
  ],
  grid: {
    containLabel: true,
    left: 10,
    right: 10,
    top: 16,
    bottom: 0,
  },
  tooltip: {
    show: true,
    formatter: e => {
      console.log(e);
      return e;
    },
  },
  legend: {
    show: false,
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
    data: ['__'],
  },
  color: colors, // 以防万一的设置无意义
  series: [],
});

function getOption(title, dataArray) {
  const option = JSON.parse(_option);
  option.title[0].text = title;

  option.tooltip.formatter = e => {
    return e.marker + '  ' + e.seriesName + ': ' + e.data;
  };
  let xAxisMax = 0;

  const _dataArray = dataArray.map((data, i) => {
    xAxisMax += data;
    return {
      data,
      name: names[i],
      color: colors[i],
    };
  });
  option.xAxis.max = xAxisMax;
  _dataArray.forEach(item => {
    if (!+item.data) return;
    option.series.push({
      type: 'bar',
      name: item.name,
      stack: '1',
      label: {
        normal: {
          show: true,
          position: ['50%', 5],
          // formatter: `{value|${item.data}}\n\n{name|${item.name}}`,
          formatter: `{value|${item.data}}`,
          align: 'center',
          textStyle: {
            color: '#fff',
            rich: {
              value: {
                fontSize: '12',
                fontWeight: 500,
                color: '#fff',
                lineHeight: 18,
              },
              name: {
                fontSize: '12',
                fontWeight: 400,
                color: 'rgba(255, 255, 255, 0.5)',
              },
            },
          },
        },
      },
      barWidth: 24,
      data: [item.data],
      itemStyle: {
        // shadowColor: item.color,
        // shadowBlur: 10,
        color: item.color,
      },
    });
  });
  return option;
}
function getOption2(title, dataArray, total) {
  const option = JSON.parse(_option);
  option.title[0].text = title;
  option.title[1].text = '全部: ' + total;

  option.tooltip.formatter = e => {
    return e.marker + '  ' + e.seriesName + ': ' + e.data;
  };
  let xAxisMax = 0;

  const _dataArray = dataArray.map((data, i) => {
    xAxisMax += data;
    return {
      data,
      name: names[i],
      color: colors[i],
    };
  });
  option.xAxis.max = xAxisMax;
  _dataArray.forEach(item => {
    if (!+item.data) return;
    option.series.push({
      type: 'bar',
      name: item.name,
      stack: '1',
      label: {
        normal: {
          show: true,
          position: ['50%', 5],
          // formatter: `{value|${item.data}}\n\n{name|${item.name}}`,
          formatter: `{value|${item.data}}`,
          align: 'center',
          textStyle: {
            color: '#fff',
            rich: {
              value: {
                fontSize: '12',
                fontWeight: 500,
                color: '#fff',
                lineHeight: 18,
              },
              name: {
                fontSize: '12',
                fontWeight: 400,
                color: 'rgba(255, 255, 255, 0.5)',
              },
            },
          },
        },
      },
      barWidth: 24,
      data: [item.data],
      itemStyle: {
        // shadowColor: item.color,
        // shadowBlur: 10,
        color: item.color,
      },
    });
  });
  return option;
}

const ProgressInfo = ({ projProgressInfo }) => {
  // const [curOption, setCurOption] = useState()
  const containerRef = useRef(null);
  const stickyHeaderRef = useRef(null);
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const scrollHandler = () => {
      setIsSticky(containerRef.current.offsetTop <= containerRef.current.parentElement.scrollTop);
    };
    containerRef.current.parentElement.addEventListener('scroll', scrollHandler);
    return () => {
      containerRef.current.parentElement.removeEventListener('scroll', scrollHandler);
    };
  }, []);

  return (
    <div ref={containerRef} className={cls('border-box', styles.progressInfo)}>
      <p className={styles.title}>工区进度信息</p>

      {!Object.keys(projProgressInfo).length ? (
        <NoData style={{height: 'calc(100vh - 800px)'}} />
      ) : (
        <>
          <ul
            ref={stickyHeaderRef}
            className={cls(styles.stickyHeader, { [styles.stickyHeaderActive]: isSticky })}
          >
            {names.map((e, i) => {
              return (
                <li key={i} className="">
                  <div
                    style={{
                      width: 6,
                      height: 6,
                      background: colors[i],
                      display: 'inline-block',
                      verticalAlign: 'middle',
                      marginRight: 6,
                    }}
                  />
                  {names[i]}
                </li>
              );
            })}
          </ul>

          {!!Object.keys(projProgressInfo).length &&
            Object.keys(projProgressInfo).map((key, i) => {
              let total = projProgressInfo[key].reduce((r, e) => (r += e), 0);
              return (
                <EchartsWrap
                  key={i}
                  style={{ height: 70 }}
                  // option={getOption(key, projProgressInfo[key])}
                  // option={getOption(key, [...projProgressInfo[key], total])}
                  option={getOption2(key, [...projProgressInfo[key].slice(0, -1)], total)}
                  opts={{ height: 70, width: 380 }}
                />
              );
            })}
        </>
      )}
    </div>
  );
};

// export default ProgressInfo;

export default connect(({ kanban }) => {
  return {
    projProgressInfo: kanban.projProgressInfo,
  };
})(ProgressInfo);
